<template>
  <div class="background">
        <div class="bottom">
            <div class="search">
                <div class="search_left">
                    <img style="margin-right: 16px;" src="" />
                    <div class="search_left_text">资源大厅</div>
                </div>
                <div class="mt-4">
                    <el-input
                    v-model="input"
                    placeholder="请输入资源名称或用户名搜索"
                    >
                    <template #append>
                        <div class="button" @click="searchall">
                            <span class="iconfont icon-sousuo"></span>
                            搜索
                        </div>
                    </template>
                    </el-input>
                </div>
            </div>
            <div class="panel">
                <div class="panelbox">
                    <p class="onep first">服务</p>
                </div>
                <div class="panelbox">
                    <p class="onep">需求</p>
                </div>
                <div class="panelbox">
                    <p class="onep">科创资源</p>
                </div>
            </div>
            <div>
                <div v-if="isready.fwlx&&isready.jsly" class="classify">
                    <classify v-for="(item) in classify" :key="item.data" :list="item" @setitem="changejsly" @setid="setid"></classify>
                </div>
                <div class="servicebox">
                    <div class="servicetitle">
                        <div class="ser_text" style="width: 250px;height: 48px;padding: 0 20px;">服务名称</div>
                        <div class="ser_text" style="width: 240px;height: 48px;padding-left: 80px;padding-right: 20px;">发布用户</div>
                        <div class="ser_text" style="width: 170px;height: 48px;padding: 0 20px;">服务类型</div>
                        <div class="ser_text" style="width: 105px;height: 48px;padding: 0 20px;">成功成交数</div>
                        <div class="ser_text" style="width: 92px;height: 48px;padding: 0 20px;">信用评价</div>
                    </div>
                    <div style="margin-top: 10px;">
                        <serla v-for="item in service" :key="item.id" :list="item"></serla>
                    </div>
                </div>
            </div>
            <div class="pager">
                <el-pagination background layout="prev, pager, next, jumper" :page-count="length" :current-page="nowpage" @current-change="changepage"/>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '../util/axiosAPI'
import classify from './classify.vue'
import serla from './serla.vue'
export default {
    data(){
        return{
            input: '',
            isready: {fwlx:false,jsly:false}, 
            classify:[{
                    name: 'fwlx',
                    data: '服务类型',
                    list: []
                },
                {
                    name: 'jsly',
                    data: '技术领域',
                    list: []
                },
                {
                    name: 'sjly',
                    data: '数据来源',
                    list: [{name:'共创云',id:'nttcc'},{name:'科惠网',id:'51kehui'},{name:'江西省网上常设技术市场',id:'jxstc'},{name:'潇湘科技要素大市场',id:'hntpe'}]
                },
                {
                    name: 'address',
                    data: '地区',
                    list: [{name:'湖北省',id:'湖北省'},{name:'湖南省',id:'湖南省'},{name:'江西省',id:'江西省'},{name:'北京市',id:'北京市'},{name:'天津市',id:'天津市'},{name:'河北省',id:'河北省'},{name:'山西省',id:'山西省'}
                    ,{name:'内蒙古自治区',id:'内蒙古自治区'},{name:'辽宁省',id:'辽宁省'},{name:'吉林省',id:'吉林省'},{name:'黑龙江省',id:'黑龙江省'},{name:'上海市',id:'上海市'},{name:'江苏省',id:'江苏省'},
                    {name:'浙江省',id:'浙江省'},{name:'安徽省',id:'安徽省'},{name:'福建省',id:'福建省'},{name:'山东省',id:'山东省'},{name:'河南省',id:'河南省'},{name:'广东省',id:'广东省'},{name:'广西壮族自治区',id:'广西壮族自治区'},
                    {name:'海南省',id:'海南省'},{name:'重庆市',id:'重庆市'},{name:'四川省',id:'四川省'},{name:'贵州省',id:'贵州省'},{name:'云南省',id:'云南省'},{name:'西藏自治区',id:'西藏自治区'},{name:'陕西省',id:'陕西省'},
                    {name:'甘肃省',id:'甘肃省'},{name:'青海省',id:'青海省'},{name:'宁夏回族自治区',id:'宁夏回族自治区'},{name:'新疆维吾尔自治区',id:'新疆维吾尔自治区'},{name:'台湾省',id:'台湾省'},{name:'香港特别行政区',id:'香港特别行政区'},{name:'澳门特别行政区',id:'澳门特别行政区'}]
                }
            ],
            reqObj: {
                pageNum: '',
                serviceTypeId: '',
                serviceTypeId2: '',
                technicalId: '',
                province: '',
                dataOrigin: '',
                keywords: ''
            },
            service: [],
            length: 1,
            nowpage:1,
            input:''
        }
    },
    mounted(){
        axios.getServiceType()
        .then((res)=>{
            for(let i=0;i<this.classify.length;i++){
                if(this.classify[i].name==='fwlx'){
                    this.classify[i].list = res.data.data
                    this.isready.fwlx = true
                }
            }
            // console.log(this.classify.fwlx)
        })
        axios.getTechnical()
        .then((res)=>{
            for(let i=0;i<this.classify.length;i++){
                if(this.classify[i].name === 'jsly'){
                    this.classify[i].list = res.data.data.list
                    this.isready.jsly = true
                }
            }
            // console.log(this.classify.jsly)
        })
        axios.getDetailed(this.reqObj).then((res)=>{
            this.service = res.data.data.list
            this.length = res.data.data.lastPage
        })
    },
    components:{
        classify,
        serla
    },
    methods:{
        searchall(){
            this.reqObj.keywords = this.input
            axios.getDetailed(this.reqObj)
            .then(res=>{
                this.service = res.data.data.list
            })
        },
        changepage(item){
            this.nowpage = item
            this.reqObj.pageNum = item
            axios.getDetailed(this.reqObj).then((res)=>{
                this.service = res.data.data.list
            })
        },
        changejsly(data){
            if(data){
                let obj = {
                name: 'seclist',
                data: '二级分类',
                list: data,
                }
                if(this.classify.length<5){
                    this.classify.splice(1,0,obj)
                }else{
                    this.classify.splice(1,1,obj)
                }
            }else{
                this.classify.splice(1,1)
            }
        },
        setid(id){
            switch(id.name){
                case 'fwlx':
                    if(id.id.length>0){
                        this.reqObj.serviceTypeId = id.id
                    }else{
                        this.reqObj.serviceTypeId = ''
                    }
                    break
                case 'seclist':
                    if(id.id.length>0){
                        this.reqObj.serviceTypeId2 = id.id
                    }else{
                        this.reqObj.serviceTypeId2 = ''
                    }
                    break
                case 'jsly' :
                    if(id.id.length>0){
                        this.reqObj.technicalId = id.id
                    }else{
                        this.reqObj.technicalId = ''
                    }
                    break
                case 'sjly':
                    if(id.id.length>0){
                        this.reqObj.dataOrigin = id.id
                    }else{
                        this.reqObj.dataOrigin = ''
                    }
                    break
                case 'address':
                    if(id.id.length>0){
                        this.reqObj.province = id.id
                    }else{
                        this.reqObj.province = ''
                    }
                    break
                default :
                    return
            }
            axios.getDetailed(this.reqObj).then((res)=>{
                this.service = res.data.data.list
                this.length = res.data.data.lastPage
            })
        }
    }
}
</script>

<style scoped>
.first::before{
    width: 100%;
}
.pager{
    padding: 20px 0;
}
.ser_text{
    color: #909399;
    font-size: 14px;
    line-height: 48px;
    font-weight: 700
}
.servicetitle{
    padding: 0 20px;
    display: flex;
    background: #f7f8f9;
    border-radius: 4px;
}
.servicebox{
    padding: 10px 0;
}
.classify{
    padding: 0 20px;
    margin-bottom: 30px;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
}
p:hover{
    color: #3473e6;
}
p:hover::before{
    width: 100%;
}
p::before{
    content: '';
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #3473e6;
    border-radius: 2px;
    transition: all .3s ease;
}
.panelbox{
    padding: 14px 6px;
    margin-right: 120px;
    position: relative;
}
.panel p {
    font-size: 14px;
    font-weight: 700;
}
.panel{
    display: flex;
    align-items: center;
    width: 1080;
    height: 48px;
    padding: 0 30px;
    margin-bottom: 10px;
    background: #f7f8f9;
    border-radius: 4px;
}
.background{
    width: 100%;
    background-color: #f6f7f8;
    padding: 30px 0;
}
.bottom{
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.06);
    border-radius: 4px;
    overflow: auto;
    width: 1140px;
}
.search{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
}
.search_left{
    display: flex;

}
.search_left_text{
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: #303133;
}
.button{
    width: 53px;
    background: #3473e6;
    color: #fff;
    text-align: center;
}
</style>
<style>
.el-input-group input{
    width: 413px;
    height: 38px;
}
.el-input-group__append{
    background-color: #3473e6;
}
.el-input--small input{
    width: 46px;
}
.el-pagination{
    justify-content: center;
}
</style>